<template>
  <div id="ShopFooter">
    <span class="share">
      <img src="../../../static/m_img/x_fx.png" alt> 分享好友
    </span>
    <span class="calling">
      <a href="tel:15106101536"><img src="../../../static/m_img/x_dh.png" alt>拨打电话</a>
    </span>
    <span class="dh" @click="dialogVisible = true">
      <img src="../../../static/m_img/x_xj.png" alt>询问该车底价
    </span>

    <Dialog
      title="像卖家询问底价"
      :visible.sync="dialogVisible"
      width="90%"
      :append-to-body="true"
      class="consultation"
      :show-close="false"
    >
      <Form :model="form" :rules="rules" ref="form">
        <FormItem prop="phone" :rules="rules.phone" ref="phone" class="codeBox">
          <Input
            v-model.number="form.phone"
            autocomplete="off"
            maxlength="11"
            placeholder="请输入您的手机号"
            @keyup.native="changePhone"
          />
        </FormItem>
      </Form>
      <span slot="footer" class="dialog-footer">
        <Button @click="handleClose">取 消</Button>
        <Button @click="submitForm('form')">立即询价</Button>
      </span>
    </Dialog>
    <Dialog
      :visible.sync="dialogVisible2"
      width="90%"
      :before-close="handleClose2"
      :append-to-body="true"
      class="message"
    >
     <div class='messageBox'>
       <img src="../../../static/m_img/t_cg.png" alt="">
       <p>已为您通知商家</p>    
       <span>商家会尽快与您联系</span>
     </div>
    </Dialog>
  </div>
</template>
<script>
import { Dialog, Button, Form, Input ,FormItem} from "element-ui";
import { postReq, getReq } from "../../assets/js/api";
import { errorRes, checkVal } from "../../assets/js/check";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      dialogVisible: false,
      dialogVisible2:false,
      form: {
        phone: ""
      },
       rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }]
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },
    handleClose2(){
       this.dialogVisible2 = false;
    },
     // 限制只能输入数字
    changePhone(e) {
      this.form.phone = e.target.value.replace(/[^0-9]/g, "");
    },
    // 提交信息
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            phone: that.form.phone,
          };
           this.dialogVisible2=true
          postReq("", params).then(res => {
            let { errcode, message, content } = res;
            if (errcode == 0) {
             this.dialogVisible2=true
            } else {
              errorRes(errcode, message);
            }
          });
          this.$refs["form"].resetFields();
          that.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
  },
  components: {
    Dialog,
    Button,
    Form,
    Input,
    FormItem
  }
};
</script>
<style lang="scss">
#ShopFooter {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.16);
  span {
    width: 33.33%;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 1.25rem;
    img {
      width: 15px;
      height: 15px;
      vertical-align: -2px;
      margin-right: 2px;
    }
  }
  .share {
    color: #666;
  }
  .calling {
    background: #ff9800;
    a{
      color: #fff;
    }
  }
  .dh {
    background: #ff651b;
  }
}
.consultation {
  .el-dialog__header {
    .el-dialog__title {
      width: 100%;
      display: block;
      text-align: center;
      color: #323232;
      font-size: 1.416667rem;
      font-weight: bold;
    }
  }
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__footer{
    // padding-bottom:0px;
    padding: 0;
    .dialog-footer{
      width: 100%;
      border-top:1px solid #dfe1e2;
      .el-button{
        width: 49%;
        border:0px;
        border-radius: 0px;
         border-bottom-left-radius: 10px;
         padding-top: 18px;
         padding-bottom: 18px;
         color: #007AFF;
         font-size: 1.416667rem;
      }
      .el-button+.el-button{
        margin-left: 0;
        border-left:1px solid #dfe1e2;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 10px;

      }
    }
  }
}
.message{
  .el-dialog{
    background: url(../../../static/m_img/t_bg2.png) 0 0 no-repeat #fff; 
    background-size: contain;
    border-radius:13px;
    .el-dialog__body{
      padding-top: 41px;
    }
    .messageBox{
      text-align: center;
      img{
        width: 30%;
      }
      p{
        color: #323232;
        font-size: 1.416667rem;
        font-weight: bold;
        margin-bottom: 1.166667rem;
      }
      span{
        color: #444;
        font-size: 1.083333rem;
      }
    }
  }
}
</style>